<template>
	<view class='submitOrder'>
		<!-- 收货地址 -->
		<view class="addressContent">
			<view class="addressLeft">

				<!-- 地址信息 -->
				<view class="addressInfo">
					<view class="addAddress"></view>
					<view v-if="addresssInfo.length != 0">
						<view class="phone"><span>{{addresssInfo.fullName}}</span>{{addresssInfo.mobile}}</view>
						<view class="address">
							{{addresssInfo.provinceText}}{{addresssInfo.cityText}}{{addresssInfo.areaText}}{{addresssInfo.address}}
						</view>
					</view>
					<!-- 如果没有地址 -->
					<view class='emptyAddress' v-else>
						<view class="addressTips">新建收货地址</view>
					</view>
				</view>
			</view>
			<!-- 右侧箭头 -->
			<image src="../../static/shopping/right.png" class="rightImg" @tap="goAddressList"></image>
		</view>
		<view class='goods-info'>
			<view class='goods-content'>
				<view class='main-image'>
					<image :src="orderInfo.goodsImg" class='goodSize' mode=""></image>
				</view>
				<view class="goods-right">
					<view class='title elliptical2'>{{orderInfo.goodsTitle}}</view>
					<view class="attribute">支持7天无理由退换货</view>

					<view class='goods-price'>
						<view class='actual'>{{orderInfo.goodsPrice*orderInfo.goodsNum}}</view>
						<view class='single'>单件：{{orderInfo.goodsPrice}}</view>
					</view>
				</view>
			</view>
			<view class='goods-option-item'>
				<view class='label'>购买数量：</view>
				<view class='value'>
					<view class='counter'>
						<view class='subtraction' @click="handleCount(1)">

						</view>
						<input class='num' type="number" @input="valueFormat" v-model="orderInfo.goodsNum"> </input>
						<view class='add' @click='handleCount(2)'>

						</view>
					</view>
				</view>
			</view>
			<view class='goods-option-item'>
				<view class='label'>邮费：</view>
				<view class='value'>0</view>
			</view>
			<view class='goods-option-item'>
				<view class='label'>买家留言：</view>
				<view class='value'>
					<input placeholder="请输入备注" v-model="remark" style="text-align: right;" />
				</view>
			</view>
		</view>
		<!-- <view class='payWay' v-if="source == 'goods' &&payType==2">
			<view class='label'>
				支付方式
			</view>
			<view class="value">
				<view class='payType'>
					<view class="type" v-for="(item,index) in walletType" :key="index" @tap="changeWalletType(item)">
						<view class="payState">
							<view class="payTitles">{{item.title}}</view>
						</view>
						<image
							:src="walletId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'"
							class="radioImg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class='payWay' v-if="source == 'goods' &&payType==5">
			<view class='label'>
				支付方式
			</view>
			<view class="value">
				<view class='payType'>
					<view class="type" v-for="(item,index) in walletType2" :key="index" @tap="changeWalletType(item)">
						<view class="payState">
							<view class="payTitles">{{item.title}}</view>
						</view>
						<image
							:src="walletId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'"
							class="radioImg"></image>
					</view>
				</view>
			</view>
		</view>

		<view class='payWay' v-if="source == 'goods' &&payType==9">
			<view class='label'>
				支付方式
			</view>
			<view class="value">
				<view class='payType'>
					<view class="type" v-for="(item,index) in walletType3" :key="index" @tap="changeWalletType(item)">
						<view class="payState">
							<view class="payTitles">{{item.title}}</view>
						</view>
						<image
							:src="walletId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'"
							class="radioImg"></image>
					</view>
				</view>
			</view>
		</view> -->

		<view class='options'>
			<view class='allNum'>共计{{orderInfo.goodsNum}}件</view>
			<view class='allPrice'>￥{{orderInfo.goodsNum * orderInfo.goodsPrice}}</view>

			<view class="btn" @tap="submitOrder">
				{{payType==6?'立即兑换':'立即购买'}}
			</view>
		</view>
		<passWordPopup :show='isProp' @close='isProp=false' @callBack="sure" />

		<warehousePopup :show='warehouseStatus' :price='orderInfo.goodsPrice*orderInfo.goodsNum'
			@sure="handleSureChange" @close='warehouseStatus = false' />
	</view>
</template>

<script>
	import warehousePopup from "@/components/basicComponents/warehousePopup.vue"
	import passWordPopup from "@/components/basicComponents/passWordPopup.vue"
	import {
		addressList,
		buyVoucherGoods,
		buyVoucherRecharge,
		buyGoods,
		rushToBuy,
		buyMemberGoods,
		thirdMethodPays
	} from '@/api/api.js'

	export default {
		name: 'submitOrder',
		data() {
			return {
				warehouseStatus: false,
				// 地址列表
				addressList: [],
				// 地址信息
				addresssInfo: '',
				// 地址id
				addressId: '',
				orderInfo: '',
				payType: '',
				isVip: 0, // 是否是会员礼包商品 1 是 0 不是
				source: '',
				remark: '',
				walletId: 1,
				walletType: [{
						id: 1,
						title: '多多券'
					},
					// {
					// 	id: 2,
					// 	title: '提货券'
					// },
					// {
					// 	id: 10,
					// 	title: '助力积分'
					// },
					{
						id: 12,
						title: '助力积分 + 提货券'
					},
					// {
					// 	id: 2,
					// 	title: '快乐豆'
					// },
					// {
					// 	id: 3,
					// 	title: '多多券+快乐豆'
					// },
				],
				walletType2: [
					// {
					// 	id: 1,
					// 	title: '多多券'
					// },
					// {
					// 	id: 2,
					// 	title: '提货券'
					// },
					{
						id: 10,
						title: '助力积分'
					},
					// {
					// 	id: 12,
					// 	title: '助力积分 + 提货券'
					// },
					// {
					// 	id: 2,
					// 	title: '快乐豆'
					// },
					// {
					// 	id: 3,
					// 	title: '多多券+快乐豆'
					// },
				],
				walletType3: [{
						id: 1,
						title: '微信'
					},
					{
						id: 12,
						title: '支付宝'
					},
					{
						id: 3,
						title: '账号打款'
					},
					{
						id: 4,
						title: '快捷支付'
					},
				],
				isProp: false,
				voucherWalletIdList: [],
			}
		},
		onLoad(e) {
			let orderInfo = e.orderInfo.replace(/""/g, "");
			this.orderInfo = {
				goodsNum: 1,
				...JSON.parse(orderInfo)
			}
			console.log('orderInfo', this.orderInfo)
			this.payType = e.payType
			if (e.payType == 5) {
				this.walletId = 10
			}
			if (e.payType == 2) {
				this.walletId = 12
			}
			this.isVip = e.isVip
			this.source = e.source
		},
		components: {
			passWordPopup,
			warehousePopup
		},
		onShow() {
			// 获取地址列表
			this.getAddressList()
		},
		methods: {
			valueFormat(event) {
				const value = event.target.value;
				if (value === '' || /^[1-9]\d*$/.test(value)) {
					this.orderInfo.goodsNum = value;
				} else {
					// 如果不符合条件，可以设置一个默认值或者不更新数据模型
					this.orderInfo.goodsNum = ''; // 清空输入或设置为上一个有效值
				}
			},

			handleSureChange(item) {
				// 出现支付密码

				// console.log(JSON.parse(item))
				this.voucherWalletIdList = JSON.parse(item)
				this.isProp = true


				// 	"addressId": 0,
				// 	"goodsId": 0,
				// 	"payPassword": "",
				// 	"quantity": 0,
				// 	"remark": "",
				// 	"voucherWalletIdList": []

			},
			// 提交订单
			submitOrder() {
				if (this.payType == 9) {
					// 如果没有收货地址,兑换用户去添加收货地址
					if (!this.addresssInfo) {
						uni.showToast({
							title: '请选择收获地址',
							icon: 'none'
						})
						return false
					}
					let data = {
						goodsId: this.orderInfo.goodsId,
						quantity: this.orderInfo.goodsNum,
						addressId: this.addressId,
						remark: this.remark,
						walletType: this.walletId,

					}
					if (this.walletId == 3) {
						uni.navigateTo({
							url: "/pages/recharge/bankCardInfo"
						})
						return
					} else {
						//获取充值订单
						buyVoucherRecharge(data).then(res => {
							if (res.code == 200) {
								const data = {
									amount: res.data.voucherPrice,
									payType: this.walletId,
									orderNo: res.data.orderNo
								}
								//调用第三方支付接口
								thirdMethodPays(data).then(res => {
									if (this.walletId == 1) {
										if (res.data.isQrCode == 1) {
											uni.navigateTo({
												url: '/pages/recharge/codePayView?payUrl=' + res
													.data
													.payUrl + '&payType=' + this
													.walletId
											})
										} else {
											uni.navigateTo({
												url: '/pages/recharge/codePayView?payUrl=' + res
													.data
													.payUrl + '&payType=' + this
													.walletId
											})
										}
									} else if (this.walletId == 12) {
										let url = res.data.payUrl
										console.log(url);
										//#ifdef APP-PLUS
										plus.runtime.openURL(url)
										//#endif

										//#ifdef H5
										window.location.href = url
										//#endif
									} else if (this.walletId == 4) {
										let url = res.data.payUrl
										//#ifdef APP-PLUS
										plus.runtime.openWeb(url)
										//#endif

										//#ifdef H5
										window.location.href = url
										//#endif
									} else {
										let payInfo = {
											payUrl: res.data.payUrl
										}
										console.log(encodeURIComponent(JSON.stringify(payInfo)))
										//#ifdef APP-PLUS
										plus.runtime.openURL(
											'http://nweb.kuailegou.fun/pages/index/payUrl?payUrl=' +
											encodeURIComponent(JSON.stringify(payInfo)))
										//#endif

										//#ifdef H5
										window.location.href =
											'http://nweb.kuailegou.fun/pages/index/payUrl?payUrl=' +
											encodeURIComponent(JSON.stringify(payInfo))
										//#endif
									}
								})
							}
						})
					}

				} else {
					if (this.payType != 6) {
						// 如果没有收货地址,兑换用户去添加收货地址
						if (!this.addresssInfo) {
							uni.showToast({
								title: '请选择收获地址',
								icon: 'none'
							})
							return false
						}

						this.isProp = true
						// // 如果是会员礼包商品
						// if (this.isVip == 1) {

						// 	this.isProp = true
						// 	return
						// }

						// // 多多券支付(抢拍商品)
						// if (false) {
						// 	this.isProp = true

						// 	// 购物券,提货券支付(商城商品)
						// } else {
						// 	debugger
						// 	uni.showLoading({
						// 		title: ''
						// 	});
						// 	let data = {
						// 		goodsId: this.orderInfo.goodsId,
						// 		quantity: this.orderInfo.goodsNum,
						// 		addressId: this.addressId,
						// 		remark: this.remark,
						// 		walletType: this.walletId
						// 	}
						// 	buyVoucherGoods(data).then(res => {
						// 		if (res.code == 200) {
						// 			uni.hideLoading()
						// 			uni.showToast({
						// 				title: '购买成功，请在我的订单中查看',
						// 				icon: 'none'
						// 			})
						// 			setTimeout(function() {
						// 				uni.switchTab({
						// 					url: '/pages/goods/goods'
						// 				})
						// 			}, 500)
						// 		}
						// 	})
						// }
					} else {
						// this.warehouseStatus = true
						if (!this.addresssInfo) {
							uni.showToast({
								title: '请选择收获地址',
								icon: 'none'
							})
							return false
						}

						this.isProp = true
					}
				}


			},
			changeWalletType(item) {
				this.walletId = item.id
			},
			handleCount(type) {
				if (type == 1) {

					if (this.orderInfo.goodsNum <= 1) {
						uni.showToast({
							icon: 'none',
							title: '数量不能小于1'
						})
						return
					}
					this.orderInfo.goodsNum--
				}
				if (type == 2) {
					this.orderInfo.goodsNum++
				}
			},
			// 前往地址列表
			goAddressList() {
				uni.navigateTo({
					url: './addressList?isSubmit=1'
				})
			},
			// 输入支付按钮之后支付后续逻辑
			sure(payPassword) {
				// debugger
				if (this.payType == 6) {
					// 结果
					console.log('1231')
					buyVoucherGoods({
						goodsId: this.orderInfo.goodsId,
						quantity: this.orderInfo.goodsNum,
						addressId: this.addressId,
						remark: this.remark,
						payPassword: payPassword,
						voucherWalletIdList: this.voucherWalletIdList,
						goodsSkuId: this.orderInfo.skuId
					}).then(res => {
						console.log('buyVoucherGoods', res)
						if (res.code == 200) {
							this.isProp = false
							uni.showToast({
								title: '兑换成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/mine/myOrder?type=2'
								})
							}, 500)

						}
					})
					return
				}
				if (this.isVip == 1) {
					uni.showLoading({
						title: ''
					});
					let data = {
						goodsId: this.orderInfo.goodsId,
						quantity: this.orderInfo.goodsNum,
						addressId: this.addressId,
						payPassword: payPassword
					}
					buyMemberGoods(data).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '购买成功，请在我的订单中查看',
								icon: 'none'
							})
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 500)
						}
					})

				} else {
					uni.showLoading({
						title: ''
					});
					let data = {
						goodsId: this.orderInfo.goodsId,
						quantity: this.orderInfo.goodsNum,
						addressId: this.addressId,
						remark: this.remark,
						walletType: this.walletId,
						payPassword: payPassword,
						goodsSkuId: this.orderInfo.skuId
					}
					buyVoucherGoods(data).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '购买成功，请在我的订单中查看',
								icon: 'none'
							})
							this.isProp = false
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/mine/myOrder?type=2'
								})
							}, 500)
						}
					})
					// 	uni.showLoading({
					// 		title: ''
					// 	});
					// 	let data = {
					// 		goodsId: this.orderInfo.goodsId,
					// 		quantity: this.orderInfo.goodsNum,
					// 		addressId: this.addressId,
					// 		walletType: this.walletId,
					// 		payPassword: payPassword,
					// 	}
					// 	rushToBuy(data).then(res => {
					// 		if (res.code == 200) {
					// 			uni.hideLoading()
					// 			uni.showToast({
					// 				title: '购买成功，请在我的订单中查看',
					// 				icon: 'none'
					// 			})
					// 			this.isProp = false
					// 			setTimeout(function() {
					// 				uni.switchTab({
					// 					url: '/pages/index/index'
					// 				})
					// 			}, 500)
					// 		}

					// 	})
				}
			},
			getAddressList() {
				let data = {}
				addressList(data).then(res => {
					this.addressList = res.data
					// 如果没有添加地址,提示去添加
					if (this.addressList.length == 0) {
						this.addresssInfo = ''
					} else if (this.addressList.length == 1) {
						// 如果只有一个地址,直接显示为默认
						this.addresssInfo = this.addressList[0]
						this.addressId = this.addressList[0].id
					} else if (this.addressList.length > 1) {
						// 如果存在多个地址,先判断是否有默认地址
						let isHaveDefault = this.addressList.some(item => item.isDefault == 1)
						// 如果有,查询默认地址
						if (isHaveDefault) {
							this.addressList.forEach(item => {
								if (item.isDefault == 1) {
									this.addresssInfo = item
									this.addressId = item.id
								}
							})
						} else {
							// 如果没有,默认第一条地址
							this.addresssInfo = this.addressList[0]
							this.addressId = this.addressList[0].id
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.submitOrder {
		width: 100vw;
		height: calc(100vh - 100rpx);
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: #F6F6F7;
	}

	.submitOrder .addressContent {
		width: 100%;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 20rpx;

	}

	.submitOrder .addressContent .addressLeft .addressInfo {
		display: flex;
		align-items: center;
	}

	.submitOrder .addressContent .addressLeft .addressInfo .phone {
		font-size: 28rpx;
		font-family: PingFangSC-Bold, PingFang SC;
		font-weight: bold;
		color: #1A1A1A;

	}

	.submitOrder .addressContent .addressLeft .addressInfo .phone>span {
		margin-right: 24rpx;
	}

	.submitOrder .addressContent .addressLeft .addressInfo .address {
		margin-top: 20rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1A1A1A;
	}

	.submitOrder .addressContent .addressLeft .addressInfo .emptyAddress {
		display: flex;
		align-items: center;
	}

	.submitOrder .addressContent .addAddress {
		width: 48rpx;
		height: 48rpx;
		background: url('@/static/statc-icon/image-4.png') no-repeat;
		background-size: 100% 100%;
		margin-right: 20rpx;
	}


	.submitOrder .addressContent .rightImg {
		width: 20rpx;
		height: 30rpx;
	}

	.submitOrder .goods-info {
		width: 100%;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-top: 22rpx;
	}

	.submitOrder .goods-info .goods-content {
		padding: 18rpx 20rpx;
		box-sizing: border-box;
		display: flex;

	}

	.submitOrder .goods-info .goods-content .main-image {
		width: 160rpx;
		height: 160rpx;
		background: #D9D9D9;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.submitOrder .goods-info .goods-content .goods-right {
		flex: 1;
		position: relative;
	}

	.submitOrder .goods-info .goods-content .goods-right .title {
		font-weight: 500;
		font-size: 28rpx;
		color: #3C3C3C;
	}

	.submitOrder .goods-info .goods-content .goods-right .attribute {
		margin-top: 20rpx;
		display: inline-flex;
		align-items: center;
		height: 28rpx;
		padding: 4rpx 20rpx;
		box-sizing: border-box;
		background: #FFFAFA;
		border-radius: 42rpx;
		border: 1px solid #FF9188;
		font-weight: 500;
		font-size: 20rpx;
		color: #FF9188;
	}

	.submitOrder .goods-info .goods-content .goods-right .goods-price {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.submitOrder .goods-info .goods-content .goods-right .goods-price .actual {
		font-weight: bold;
		font-size: 32rpx;
		color: #FF3C2D;
		display: flex;
		align-items: flex-end;

	}

	.submitOrder .goods-info .goods-content .goods-right .goods-price .actual::before {
		content: '实付:';
		font-weight: bold;
		font-size: 20rpx;
		color: #FF3C2D;
		padding-bottom: 4rpx;
		margin-right: 10rpx;

	}


	.submitOrder .goods-info .goods-content .goods-right .goods-price .single {
		font-weight: bold;
		font-size: 20rpx;
		color: #FF3C2D;
		display: flex;
		align-items: center;
	}

	.submitOrder .goods-info .goods-content .goods-right .goods-price .single::before {
		content: '';
		width: 2rpx;
		height: 22rpx;
		background: #FF3C2D;
		display: block;
		margin: 0 8rpx;
	}

	.submitOrder .goods-info .goods-content .main-image .goodSize {
		width: 160rpx;
		height: 160rpx;
		background: #D9D9D9;
		border-radius: 8rpx;
	}

	.submitOrder .goods-info .goods-option-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 24rpx;
		border-bottom: 2rpx solid #F9F9F9;
		padding: 24rpx 0;
		box-sizing: border-box;
	}

	.submitOrder .goods-info .goods-option-item .label {
		font-weight: 500;
		font-size: 30rpx;
		color: #3C3C3C;
	}

	.submitOrder .goods-info .goods-option-item .value {}

	.counter {
		display: flex;
		align-items: center;
	}

	.counter .subtraction {
		width: 48rpx;
		height: 48rpx;
		background: url("@/static/statc-icon/image-5.png") no-repeat;
		background-size: 100% 100%;
	}

	.counter .num {
		width: 100rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}

	.counter .add {
		width: 48rpx;
		height: 48rpx;
		background: url("@/static/statc-icon/image-6.png") no-repeat;
		background-size: 100% 100%;

	}

	.payWay {
		display: flex;
		flex-direction: column;

		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.payWay .label {
		font-weight: 500;
		font-size: 30rpx;
		color: #3C3C3C;
		margin-bottom: 20rpx;
	}

	.payType {}

	.payType .type {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payType .type:not(:last-child) {
		margin-bottom: 20rpx;
	}

	.payType .type .radioImg {
		width: 40rpx;
		height: 40rpx;
	}

	.payType .type .payState {
		display: flex;
		align-items: center;
	}

	.payType .type .payState .payImg {
		width: 56rpx;
		height: 56rpx;
	}

	.payType .type .payState .payTitles {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1A1A1A;
	}

	.options {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		box-shadow: 0px -6rpx 8rpx 0px rgba(199, 199, 199, 0.25);
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.options {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.options .allNum {
		font-weight: bold;
		font-size: 26rpx;
		color: #939393;
	}

	.options .allPrice {
		font-weight: bold;
		font-size: 36rpx;
		color: #3C3C3C;
		margin: 0 20rpx 0 10rpx;
	}

	.options .allPrice:before {
		content: "合计:";
		font-size: 36rpx;
		color: #3C3C3C;
	}

	.options .btn {
		padding: 26rpx 59rpx;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		background: #00C538;
		border-radius: 90rpx;
	}
</style>